<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <title>跳一跳</title>
    <style>
        * {
            padding: 0;
            margin: 0
        }
        img {
            display: block;
            margin: 0 auto;
        }

    </style>
</head>

<body>
<img id="jump" src="">
<script src="https://cdn.bootcss.com/socket.io/2.0.4/socket.io.slim.js"></script>
<script>
    var socket = io('http://localhost:7001');
    var img = document.querySelector('img');
    socket.on('connect', function () {
        socket.emit('start');
        console.log('...', '连接成功')
    });

    socket.on('jumpStart', function (src) {
        img.src = src;
    });
    socket.on('jumpEnd', function () {
        socket.emit('start');
    });


    socket.on('disconnect', function () {
        console.info('disconnect');
    });

    var posi = [];
    img.onclick = function (e) {
        if (posi.length > 2) {
            return false;
        }
        posi.push([e.offsetX, e.offsetY]);
        if (posi.length === 2) {
            var calX = posi[1][0] - posi[0][0];
            var calY = posi[1][1] - posi[0][1];
            var time = Math.pow((calX * calX + calY * calY), 0.5) * 1.35;
            console.log('...', 'OK', time)
            socket.emit('jump', time);
        }
    };
    img.onload = function () {
        posi = [];
    }
</script>
</body>

</html>